<template>
  <div class="ctlResultNum-root">
    <div style="display: flex;align-items: center">
      当前采集人数
      <dv-digital-flop @click.native="ctlUserClick" :config="ctlUserNumConfig"
                       style="width:60px;height:40px;cursor: pointer"/>
      人，总采集数
      <dv-digital-flop @click.native="ctlNumClick" :config="ctlNumConfig"
                       style="width:60px;height:40px;cursor: pointer"/>
      份
    </div>
    <el-divider></el-divider>
  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, watch, computed } from '@vue/composition-api'
  import { onlineUser, statistics } from '@/api/industry/ctl'

  export default {
    name: 'ctlResultNum',
    setup(props, content) {
      let data = reactive({
        ctlUserNumConfig: {
          number: [0],
          content: '{nt}',
          style: {
            fontSize: 30,
            fill: 'rgb(45,175,60)',
            fontWeight: 'bold'
          }
        },
        ctlNumConfig: {
          number: [0],
          content: '{nt}',
          style: {
            fontSize: 30,
            fill: 'rgb(45,175,60)',
            fontWeight: 'bold'
          }
        }
      })
      const ctlNumClick = () => {
        content.emit('ctlNumClick')
      }
      const ctlUserClick = () => {
        content.emit('ctlUserClick')
      }
      const setUserNum = (num) => {
        let r = JSON.parse(JSON.stringify(data.ctlUserNumConfig))
        r.number = [num]
        data.ctlUserNumConfig = r
      }
      const setCtlNum = (num) => {
        let r = JSON.parse(JSON.stringify(data.ctlNumConfig))
        r.number = [num]
        data.ctlNumConfig = r
      }
      onMounted(() => {
        onlineUser().then(response => {
          let redata = response.data
          setUserNum(redata.length)
        })

        statistics().then(response => {
          let redata = response.data
          // cltResultCount: 87  总数
          // cltSpecies: 7  类别
          setCtlNum(redata.cltResultCount)
        })

      })
      return { ...toRefs(data), setUserNum, setCtlNum, ctlNumClick, ctlUserClick }
    }
  }
</script>

<style scoped lang="scss">
  .ctlResultNum-root {
    padding: 5px 10px;

  }


</style>
<style lang="scss">
  .ctlResultNum-root {
    .el-divider.el-divider--horizontal {
      margin: 0;
    }
  }
</style>
